<template>
	<div class="Menu">
		<i :class="['xw-icon',menu.icon]"></i>
		<div>
			{{menu.label}}
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			menu: {
				type: Object,
				default: {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// @import url("../style/index.css");
	.Menu {
		width: 90px;
		padding: 10px;
		height: 60px;
		text-align: center;
		// display: flex;
		// flex-direction: column;
		// border: 1px solid #ddd;
		cursor: move;

		i {
			font-size: 24px;
		}
	}

	.Menu:hover {
		color: #fff;
		background: var(--xw-color-primary);
		border-radius: 5px;
	}
</style>